<template>
  <div class="app-container">
    <el-dialog title="添加管理员" :visible.sync="showAddDialog" @close="finishUserOp">
      <admin-addor :uid="targetId" ></admin-addor>
    </el-dialog>
    <el-dialog title="修改管理员" :visible.sync="showEditDialog" @close="finishUserOp">
      <admin-editor :id="targetId" ></admin-editor>
    </el-dialog>
    <el-dialog title="重置管理员密码" :visible.sync="showPwdDialog">
      <admin-resetpwd :id="targetId" ></admin-resetpwd>
    </el-dialog>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" size="small" v-on:click="opAdd">添加管理员</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label='ID' width="55px">
        <template slot-scope="scope">
          {{scope.row.id}}
        </template>
      </el-table-column>
      <el-table-column label="管理员名" align="center">
        <template slot-scope="scope">
          {{scope.row.username}}
        </template>
      </el-table-column>
      <el-table-column label="真是姓名" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="头像地址" width="60px" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" width="40px" height="40px" />
        </template>
      </el-table-column>
      <el-table-column label="角色" width="120px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.role == 99" type="success">{{scope.row.role_name}}</el-tag>
          <el-tag v-else>{{scope.row.role_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="管理管理员" align="center" width="100px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.role == 99" type="success">允许</el-tag>
          <el-tag v-else type="danger">禁止</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="120px">
        <template slot-scope="scope">
          <span>
            <el-dropdown size="small" split-button type="primary" @command="opHandler">
            操作
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="scope.row.cmd_edit">编辑</el-dropdown-item>
              <el-dropdown-item :command="scope.row.cmd_resetPwd">修改密码</el-dropdown-item>
              <el-dropdown-item :command="scope.row.cmd_del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:20px;">
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      :pager-count="pageItemCount"
      layout="prev, pager, next"
      :total="pageAllCount">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { getList, del } from '@/api/admin'
import AdminAdd from '@/components/Admin/Add'
import AdminEditor from '@/components/Admin/Edit'
import AdminResetPwd from '@/components/Admin/ResetPwd'
export default {
  data() {
    return {
      showAddDialog: false,
      showEditDialog: false,
      showPwdDialog: false,
      targetId: 0,
      pageSize: 10,
      pageItemCount: 0,
      currentPage: 1,
      pageAllCount: 100,
      list: null,
      listQuery: { page: 1 },
      listLoading: true
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
  },
  components: {
    'admin-addor': AdminAdd,
    'admin-editor': AdminEditor,
    'admin-resetpwd': AdminResetPwd
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.listQuery['page'] = this.currentPage
      getList(this.listQuery).then(res => {
        this.list = res.items
        this.pageItemCount = this.list.length
        this.pageAllCount = res.total
        this.listLoading = false
      })
    },
    opHandler(command) {
      console.log('cmd:' + command)
      // this.listLoading = true
      const cmdInfo = command.split(':')
      switch (cmdInfo[0]) {
        case 'edit':
          this.targetId = cmdInfo[1]
          this.showEditDialog = true
          break
        case 'resetPwd':
          this.targetId = cmdInfo[1]
          this.showPwdDialog = true
          break
        case 'del':
          console.log('delete item !!!')
          this.targetId = cmdInfo[1]
          this.opDel()
          break
        default:
          console.log('no law command')
      }
      // this.listLoading = false
    },
    finishUserOp() {
      this.targetId = 0
      this.fetchData()
    },
    handleCurrentChange(page) {
      // 修改当前页
      this.currentPage = page
      this.fetchData()
    },
    opAdd() {
      this.showAddDialog = true
    },
    opDel() {
      console.log("删除管理员ID:"+this.targetId)
      del(this.targetId).then(response => {
        console.log(response)
        this.$message.success('删除成功')
        // 更新管理员列表
        this.fetchData()
      })
    }

  }
}
</script>
